<template>
	<view>
		<image src="/static/home/bg@2x.png" class="pagebg" mode=""></image>
		<view class="con">
			<u-status-bar></u-status-bar>
			<view class="con__top">
				<view class="u-flex u-flex-between u-flex-y-center">
					<view class="u-flex u-flex-items-end">
						<view class="con__top__title">
							发现
						</view>
						<image src="/static/home/cxcf.png" class="con__top__titlebg" mode=""></image>
					</view>
				</view>
			</view>
			<view class="u-flex u-flex-between u-flex-y-center">
				<view class="con__box" v-for="(item,index) in tablist" :key="index">
					<image :src="'/static/find/'+index+'.png'" class="con__box__bg" mode=""></image>
					<view class="con__box__name">
						{{item.name}}
					</view>
					<view class="con__box__tip">
						{{item.tip}}
					</view>
				</view>
			</view>
			<view class="u-flex u-flex-between u-flex-y-center u-flex-wrap">
				<view class="con__item" v-for="(item,index) in 10" :key="index">
					<image src="/static/logo.png" class="con__item__pic" mode="aspectFill"></image>
					<view class="con__item__text u-line-2">
						十大健身运动方法，你知道几种？
					</view>
				</view>
			</view>
		</view>
		<tabbar :current="2"></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist:[
					{name:'减脂食谱',tip:'科学减脂 安全有效',url:''},
					{name:'亲情关怀',tip:'亲人健康 随时呵护',url:''},
				]
			};
		}
	}
</script>

<style lang="scss">
	.con {
		position: relative;
		padding: 40rpx 32rpx 8rpx;
		z-index: 1;

		&__top {
			padding: 0 8rpx;
			margin-bottom: 48rpx;
			&__title {
				font-family: SourceHanSansCN;
				font-weight: bold;
				font-size: 60rpx;
				color: #000000;
				line-height: 60rpx;
			}

			&__titlebg {
				width: 128rpx;
				height: 40rpx;
				margin-left: 12rpx;
			}
		}
		&__box{
			margin-bottom: 2rpx;
			width: 330rpx;
			height: 200rpx;
			border-radius: 16rpx;
			position: relative;
			overflow: hidden;
			&__bg{
				width: 330rpx;
				height: 200rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
			&__name{
				font-family: SourceHanSansCN, SourceHanSansCN;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 32rpx;
				padding: 36rpx 0 12rpx 36rpx;
				position: relative;
			}
			&__tip{
				font-family: SourceHanSansCN, SourceHanSansCN;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 24rpx;
				padding-left: 36rpx;
				position: relative;
			}
		}
		&__item{
			margin-top: 26rpx;
			width: 330rpx;
			height: 438rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			overflow: hidden;
			&__pic{
				width: 330rpx;
				height: 330rpx;
			}
			&__text{
				width: 290rpx;
				font-family: SourceHanSansCN, SourceHanSansCN;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				line-height: 34rpx;
				padding-left: 20rpx;
			}
		}
	}
</style>